import * as fs from 'fs';
import * as path from 'path';

import { BaseCreater, Template } from '../baseCreater';
import { ICreater } from '../iCreater';

import { Util } from '../../Util';

/**
 * 创建Modal组件
 */
export class ModalCreater extends BaseCreater implements ICreater {

    constructor() {
        super();
        this.template = Template.fromJs({
            ts: `
                import { Component, OnInit, AfterViewInit, Injector, ViewChild, ElementRef, Output, Input, EventEmitter } from '@angular/core';
                import { AppComponentBase } from '@shared/common/app-component-base';
                import { appModuleAnimation } from '@shared/animations/routerTransition';
                import { ModalDirective } from 'ngx-bootstrap/modal';

                @Component({
                selector: "{1}Modal",
                templateUrl: './{0}.modal.html',
                styleUrls: ['./{0}.modal.less'],
                animations: [appModuleAnimation()]
                })
                export class {1}ModalComponent extends AppComponentBase implements AfterViewInit, OnInit {

                    private active: boolean = false;
                    @ViewChild('{1}Modal') modal: ModalDirective;
                    @Output('onSaved') onSaved: EventEmitter<any> = new EventEmitter<any>();
                    constructor(i: Injector){
                        super(i);
                    }                    

                    ngOnInit(){}

                    ngAfterViewInit() {}

                    close() {
                        this.active = false;
                        this.modal.hide();
                    }                

                    show() {
                        this.active = true;
                        this.modal.show();
                    }

                    save(){
                        this.onSaved.emit();
                    }
                }
            `,
            html: `
                <div bsModal #{0}Modal="bs-modal" class="modal fade" aria-labelledby="{0}Modal" [config]="{backdrop: 'static'}"
                    aria-hidden="true">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h4 class="modal-title pull-left">这里输入标题</h4>
                                <button (click)="close()" type="button" class="close" data-dismiss="modal">
                                    <span aria-hidden="true">&times;</span>
                                    <span class="sr-only">Close</span>
                                </button>
                            </div>
                            <div class="modal-body">
                                <!--这里输入内容-->
                            </div>
                            <div class="modal-footer">
                                <a (click)="save()" class="btn btn-default red">{{l('Save')}}</a>
                            </div>
                        </div>
                    </div>
                </div>                      
            `
        });
    }


    create(args: any) {

        let self = this;

        let modalName = <string>args.modalName;
        let filePath = path.join(args.filePath, Util.underscoreName(modalName));

        self.template.ts = Util.formatString(self.template.ts, [Util.underscoreName(modalName), Util.camelName(modalName)]);
        self.template.html = Util.formatString(self.template.html, [Util.camelName(modalName)])

        //1 创建提示文件
        let tsFileName = filePath + '.modal.ts';

        self.createFile(tsFileName, self.template.ts).then(() => {
            console.log('创建ts文件成功');
        });

        //2 创建HTML文件
        let htmlFilePath = filePath + '.modal.html';
        self.createFile(htmlFilePath, self.template.html).then(() => {
            console.log('创建html文件成功');
        });
        //3 创建样式文件
        self.createFile(filePath + '.modal.less').then(() => {
            console.log('创建less文件成功');
        });
    }



}